<template>
	<view class="inspect-container">
		<tab-nav :showTotal="false" :tabCurrentIndex="tabCurrentIndex" :navList="navList" @change="setTabIndex"></tab-nav>
		<view style="margin-top: 66rpx;" class="inspect-box" v-if="tabCurrentIndex == 0">
			<view class="inspect-header">
				<view class="desc">{{checkPointType[params['检查点类型']]}}</view>
				<view class="pop">
					<dean-popover modalLeftPos="-90rpx" :isShowIcon="true" textColor="#3699FF" @select="selectChange" ref="deanPopover" :btnList="btnList"></dean-popover>
				</view>
			</view>
			<view class="inspect-content">
				<view v-for="(item,index) in inspectItemList" :key="item.id">
					<text :style="{color: colorType[item['检查项重要级']] }">{{'(' + importLevel[item['检查项重要级']] + ')'}}</text>
				{{index + 1}}.{{item['检查项描述']}}
				</view>
			</view>
		</view>
		<view style="margin-top: 66rpx;" class="inspect-box" v-if="tabCurrentIndex == 1">
			<view class="inspect-header">
				<view class="desc">{{facilityType[params1['设施类型']]}}</view>
				<view class="pop">
					<dean-popover modalLeftPos="-90rpx" :isShowIcon="true" textColor="#3699FF" @select="selectChange1" ref="deanPopover" :btnList="installList"></dean-popover>
				</view>
			</view>
			<view class="inspect-content">
				<view v-for="(item,index) in installItemList" :key="item.id">
					<text >{{}}</text>
				{{index + 1}}.{{item['检查项描述']}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TabNav from '../components/tab-nav/tab-nav.vue'
	import DeanPopover from '../components/dean-popover/dean-popover.vue'
	export default {
		components: {
			DeanPopover,
			TabNav
		},
		data() {
			return {
				facilityType: this.$type.facilityType,
				checkPointType: this.$type.checkPointType,
				params: {
					检查点类型: 'company'
				},
				params1: {
					设施类型: ['annihilator']
				},
				navList: [{
						text: '检查点'
					},
					{
						text: '设施'
					}
				],
				inspectItemList: [],
				installItemList: [],
				tabCurrentIndex: 0,
				importLevel: {
					1: "低",
					2: "中",
					3: "高"
				},
				colorType: {
					1: '#DECE43',
					2: '#FBB861',
					3: '#FB6161'
				},
				colorList: ['#DECE43','#FBB861','#FB6161'],
				checkType: ['company', 'restaurant', 'clinic', 'residential', 'shop','publicarea','room'],
				// active1: 0,
				btnList: ['企业', '餐饮店', '个体诊所', '住宅小区', '商铺','公共区域','房屋'],
				installList: ['灭火器', '消防栓', '煤气罐', '烟雾探测器', '温度探测器'],
				installType: ['annihilator', 'hydrant','gasTank', 'smokeDetector', 'temperatureDetector', ],
			}
		},
		onShow() {

		},
		onLoad() {
			this.getInspectItem()
			this.getInstallItem()
		},
		// computed: {
		// 	levelColor() {
		// 		return  this.colorType[item['检查项重要级']]
		// 	}
		// }
		methods: {
			getInspectItem() {
				this.$http.post('gridSystem/checkPoint/configList', this.params).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.inspectItemList = res.data.list
					}
				})
			},
			getInstallItem() {
				this.$http.post('gridSystem/device/configList', this.params1).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.installItemList = res.data.list
					}
				})
			},
			setTabIndex(val) {
				this.tabCurrentIndex = val
			},
			selectChange(val) {
				console.log(val)
				this.params.检查点类型 = this.checkType[val]
				this.getInspectItem()
			},
			selectChange1(val) {
				console.log(val)
				this.params1.设施类型 = [this.installType[val]]
				this.getInstallItem()
			},
		}
	}
</script>

<style lang="scss">
	.compos {
		// margin-left: 600rpx!important;
	}

	.inspect-container {
		.inspect-box {}

		.inspect-header {
			height: 88rpx;
			padding: 0 70rpx 0 50rpx;
			border: 2rpx solid #f5f5f5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.desc {
				font-size: 36rpx;
				font-weight: bold;
			}
		}

		.inspect-content {
			line-height: 56rpx;
			font-size: 32rpx;
			color: #333;
			padding: 32rpx 30rpx 30rpx 50rpx;
		}
	}
</style>
